<template>
  <el-card class="mt-20">
    <!-- 创建地图容器元素 -->
    <div id="BMapContainer"></div>
  </el-card>
</template>

<script lang="ts">
export default {
  name: "BMap",
};
</script>
<!-- 
  获取到ak
  1..eslintrc.js文件配置全局变量(解决eslint报错)
    // 全局变量
    globals:{
      BMapGl:'readonly'
    }
  2.src/vite-env.d.ts 文件添加(进行声明，会自动把类型添加到 vite 提供的 import.meta.env 上)
    interface Window {
      initBMap(): void;
    }
    declare const BMapGL: any;
  3.src/views/home/components/BMap.vue
    >1.html容器给id，css设置高度
    >2.引入百度地图js文件
      - 在index.html页面引入，问题：一上来就加载
      - 异步加载(动态创建script标签，给src属性，再添加到body中)
    >3.给window添加全局函数
      window.initBMap = () => {
        // 创建地图实例
        const map = new BMapGL.Map("BMapContainer");
        // 设置中心点坐标
        const point = new BMapGL.Point(114.1, 22.5);
        // 地图初始化，同时设置地图展示级别
        map.centerAndZoom(point, 12);

        map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放

        // map.setMapType(BMAP_SATELLITE_MAP); // 设置地图类型为地球模式

        const scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
        map.addControl(scaleCtrl);
        const zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
        map.addControl(zoomCtrl);
        const cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件
        map.addControl(cityCtrl);
      };
 -->
<script lang="ts" setup>
import { onMounted } from "vue";

onMounted(() => {
  // 引用百度地图API文件
  const script = document.createElement("script");
  script.src =
    "https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=CmGXucbtUA6kUcZmMfMf0a9RxD93cDIu&callback=initBMap";
  document.body.append(script);
  window.initBMap = () => {
    // 创建地图实例
    const map = new BMapGL.Map("BMapContainer");
    // 设置中心点坐标
    const point = new BMapGL.Point(114.1, 22.5);
    // 地图初始化，同时设置地图展示级别
    map.centerAndZoom(point, 12);
    // 开启鼠标滚轮缩放
    map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
    // 变更地图类型为地球
    // map.setMapType(BMAP_EARTH_MAP); // 设置地图类型为地球模式
    // 使用Map.addControl()方法向地图添加控件
    var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
    map.addControl(scaleCtrl);
    var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
    map.addControl(zoomCtrl);
    var cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件
    map.addControl(cityCtrl);
  };
});
</script>

<style scoped>
/* 设置容器样式 */
#BMapContainer {
  height: 600px;
}
</style>
